<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/cesium/Cesium.js"></script>
    <style>
        @import url(../lib/cesium/widgets.css);
        html,
        body,

        #rootContainer {
            display: flex;
            height: 800px;
            width: 1900px;
        }

        #c1, #c2 {
            flex: 1;
            border: 1px solid #ddd;
            padding: 1px;
            margin: 1px;
            background: lightsteelblue;
        }

        #c2{
            background: yellow;
        }

        #cesiumContainer1, #cesiumContainer2 {
            height: 80%;
            background: #f0f0f0;
            margin-bottom: 1px;
            /* 默认无边框 */
            border: 2px solid transparent;
        }

        #logContainer1, #logContainer2 {
            height: 15%;
            background: #e0e0e0;
            padding: 5px;
        }
        /* 焦点状态下的样式 */
        .focused {
            border: 2px solid #2196F3 !important; /* 蓝色边框 */
            box-shadow: 0 0 5px rgba(33, 150, 243, 0.5);
        }
    </style>
</head>
<body>
<div id="rootContainer">
    <div id="c1">
        <div id="cesiumContainer1"></div>
        <div id="logContainer1"></div>
    </div>
    <div id="c2">
        <div id="cesiumContainer2"></div>
        <div id="logContainer2"></div>
    </div>
</div>

<script type="module">
    import { LCCRender } from '../sdk/LCC-Web-0.5.1/lcc-0.5.1.js'
    import { CesiumAppConfig } from '../js/CesiumAppConfig.js'
    import { ThreeDGSLCCConfigForCesiumHandler,ThreeDGSLCCConfigForCesiumParser } from '../ThreeDGSLCCConfigForCesiumParser.js'

    // 焦点方面的设置动作
    function focusSetting(){
        console.log("focusSetting()");

        document.addEventListener('DOMContentLoaded', function() {
            const container1 = document.getElementById('cesiumContainer1');
            const container2 = document.getElementById('cesiumContainer2');

            // 初始聚焦到第一个容器
            container1.focus();
            container1.classList.add('focused');

            // 容器1的点击和焦点事件
            container1.addEventListener('click', function() {
                this.focus(); // 点击时聚焦
            });
            container1.addEventListener('focus', function() {
                // 添加焦点样式并移除其他容器的样式
                this.classList.add('focused');
                container2.classList.remove('focused');
            });

            // 容器2的点击和焦点事件
            container2.addEventListener('click', function() {
                this.focus(); // 点击时聚焦
            });
            container2.addEventListener('focus', function() {
                this.classList.add('focused');
                container1.classList.remove('focused');
            });
        });

    }

    // 获取Cesium的token信息
    function getCesiumToken(){
        console.log('getCesiumToken() token:' + CesiumAppConfig.getToken());
        // const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4ODUyNmNkNy1lMWI4LTQyNWMtODdjNi1iMmU1NWEwZTMxNmMiLCJpZCI6MzA2MjUyLCJpYXQiOjE3NDgyMzE2MTh9.rYKtbC3bpT7IvG0pTDIbzXSWKxHLgSpbD_NnaW0HZM8';
        const token = CesiumAppConfig.getToken();
        // const token = "";
        console.log('getCesiumToken() token:' + token);
        return token;
    }

    function createViewer(containerId){
        const viewer = new Cesium.Viewer(containerId, {
            orderIndependentTranslucency: false, // Close order-independent rendering
            useDefaultRenderLoop: true,
            resolutionScale: window.devicePixelRatio,
            contextOptions: {
                webgl2: true, // 强制使用 WebGL 2.0
                requestWebgl2: true
            },
            // sceneMode: Cesium.SceneMode.SCENE3D,
            // baseLayerPicker: false,
            // animation: false,
            // timeline: false,
            // fullscreenButton: false,
            // vrButton: false,
        });

        viewer.scene.debugShowFramesPerSecond = true;
        // 强制设置 Viewer 容器高度
        // viewer.container.style.height = '100%';
        return viewer
    }

    function initializeCesium(){
        // Maybe you need to create an access token of your own.  https://cesium.com/learn/ion/cesium-ion-access-tokens/
        Cesium.Ion.defaultAccessToken = getCesiumToken();
        // Cesium.Ion.defaultAccessToken = "";
        // 后续设置
        const obj = [6378137.0, 6378137.0, 6356752.3142451793];
        Cesium.Ellipsoid.WGS84 = Object.freeze(
            new Cesium.Ellipsoid(obj[0], obj[1], obj[2])
        );
    }

    function initCesiumAndCreateViewer(containerId){
        initializeCesium();
        const viewer = createViewer(containerId);
        console.log('initCesiumAndCreateViewer() viewer:' + viewer);
        return viewer;
    }


    function executeLoadFirstPage(){
        ThreeDGSLCCConfigForCesiumHandler.fetchThreeDGSLCCWithJsonUrl("../threeDGSLCCConfigForCesium.json").then((configData) => {
            const parser = new ThreeDGSLCCConfigForCesiumParser(configData);
            const baseUrl = parser.baseUrl;
            const path = "/example/data/3dGS/常州园区-202505261447/常州园区东半区1/meta.lcc";
            // 存放相关地图的容器
            const containerId = 'cesiumContainer1';
            const viewer = initCesiumAndCreateViewer(containerId);
            const lccPath = baseUrl + path;
            console.log(" executeLoadFirstPage() method fetchThreeDGSLCCWithJsonUrl() then()  lccPath:",lccPath);
            // printLog("lcc文件在服务器上存储地址为:" + lccPath);
            loadLcc(lccPath,viewer);
        }).catch(error=>{
            console.error(" 调用 fetchThreeDGSLCCWithJsonUrl（） 解析文件异常:", error);
            // printLog(" 调用 fetchThreeDGSLCCWithJsonUrl（） 解析文件异常");
        }).finally(()=>{});
    }

    function executeLoadSecondPage(){
        ThreeDGSLCCConfigForCesiumHandler.fetchThreeDGSLCCWithJsonUrl("../threeDGSLCCConfigForCesium.json").then((configData) => {
            const parser = new ThreeDGSLCCConfigForCesiumParser(configData);
            const baseUrl = parser.baseUrl;
            const path = "/example/data/3dGS/engineeringVehicles/LCC_Results/meta.lcc";
            // const path = "/example/data/3dGS/常州园区-202505261447/东1/meta.lcc";
            // 存放相关地图的容器
            const containerId = 'cesiumContainer2';
            const viewer = initCesiumAndCreateViewer(containerId);
            const lccPath = baseUrl + path;
            console.log(" executeLoadSecondPage() method fetchThreeDGSLCCWithJsonUrl() then()  lccPath:",lccPath);
            // printLog("lcc文件在服务器上存储地址为:" + lccPath);
            loadLcc(lccPath,viewer);
        }).catch(error=>{
            console.error("executeLoadSecondPage() 调用 fetchThreeDGSLCCWithJsonUrl（） 解析文件异常:", error);
            // printLog(" 调用 fetchThreeDGSLCCWithJsonUrl（） 解析文件异常");
        }).finally(()=>{});

    }

    function loadLcc(lccDataPath,viewer){
        console.log("loadLcc() lccDataPath:",lccDataPath)
        // 这段默认加上
        // 创建一个局部东北天坐标系（ENU）到地心固定坐标系（ECEF）的变换矩阵
        // 1:坐标转换
        // 2:创建变换矩阵
        const m1 = Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(114.0592, 22.5429, 10));

        const lccObject = LCCRender.load({
            camera: viewer.camera,
            scene: viewer.scene,
            dataPath: lccDataPath,
            renderLib: Cesium,
            modelMatrix: m1, // Init matrix
            canvas: viewer.scene.canvas,
            useEnv: false
        }, (mesh) => {
            //加载成功后回调的代码
            console.log("模型加载完成,mesh:", mesh);
            // 获取LCC模型的基准点坐标, WGS84笛卡尔坐标。可用于飞行.Cesium特有。
            const cartesian = lccObject.getTranslation();
            console.log("lcc 加载成功，cartesian: ", cartesian);


            // 这段代码的作用是在 Cesium 创建的三维地球场景中，指定的cartesian位置处添加一个大小为 2 像素的红色点标记。
            // 这种点标记通常用于表示地理位置、兴趣点或数据可视化中的特定点位。
            const point = {
                position: cartesian,
                point: { pixelSize: 2, color: Cesium.Color.RED }
            }
            const entity = viewer.entities.add(point);
            // 飞到指定位置
            viewer.flyTo(entity);

            //lcc加载成功，设置键盘控制事件相关代码
            {

            }
        }, (percent) => {
            // 正在加载时候回调的代码(根据加载进度不断变化)
            console.log("Lcc object loading: " + (percent * 100).toFixed(1) + "%");
        }, () => {
            // 加载失败后回调的代码
            console.error("Lcc object loading failure");
            // printLog("加载LCC失败...");
        });

    }

    function executeLoad() {
        console.log("executeLoad() 加载...");

        setTimeout(() => {
            executeLoadFirstPage();
        },1000 * 2);

        setTimeout(() => {
            executeLoadSecondPage();
        },1000 * 8);

    }

    function executePageLoad(){
        console.log("executePageLoad() 页面加载...");
    }

    executeLoad();



</script>
</body>
</html>